<link rel="stylesheet" href="layui/css/layui.css">

<body class="layui-layout-body">
<style>
    .lab_width{
        width: 200px;
    }
    .input_width{
        width: 200px;
    }
</style>
<div style="padding: 15px;">
    <form class="layui-form" action="" lay-filter="example">
        <div class="layui-form-item">
            <label class="layui-form-label lab_width">联系方式</label>
            <div class="layui-input-inline input_width">
                <input id="ID" name="ID" type="hidden" name="" value="">
                <input id="Contact" type="text" name="Contact" lay-verify="required" autocomplete="off"
                       placeholder="请输入" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label lab_width">名称</label>
            <div class="layui-input-inline input_width">
                <input id="POP3" type="text" name="POP3" lay-verify="required" autocomplete="off" placeholder="请输入"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label lab_width">密码</label>
            <div class="layui-input-inline input_width">
                <input id="SMTP" type="text" name="SMTP" lay-verify="required" autocomplete="off" placeholder="请输入"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label lab_width">Twilio服务账号</label>
            <div class="layui-input-inline input_width">
                <input id="TwilioSid" type="text" name="TwilioSid" lay-verify="required" autocomplete="off"
                       placeholder="请输入" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label lab_width">Twilio服务认证字串</label>
            <div class="layui-input-inline input_width">
                <input id="TwilioAuth" type="text" name="TwilioAuth" lay-verify="required" autocomplete="off"
                       placeholder="请输入" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label lab_width">Twilio号码</label>
            <div class="layui-input-inline input_width">
                <input id="TwilioNumber" type="text" name="TwilioNumber" lay-verify="required" autocomplete="off"
                       placeholder="请输入" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-inline" style="width: 400px">
                <button class="layui-btn" type="button" lay-submit="" lay-filter="add" style="margin-left: 150px">立即修改</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script src="layui/layui.js"></script>
<script>
    layui.use(['table', 'form'], function () {
        var table = layui.table;
        var form = layui.form;

        $(document).ready(function () {
            $.ajax({
                type: "GET",
                url: "http://svcsa.org/System",
                data: {},
                dataType: "json",
                async: false,
                headers: {
                    Accept: "application/json" //设置header头
                },
                success: function (data) {
                    var data = data.data;
                    layui.use(['form', 'layedit', 'laydate'], function () {
                        //表单初始赋值
                        form.val('example', data)
                    });
                }
            });
        });


        form.on('submit(add)', function (data) {
            var index = parent.layer.getFrameIndex(window.name);
            $.ajax({
                url: 'http://svcsa.org/System',
                type: 'POST',
                dataType: 'json',
                data: {
                    Contact: data.field.Contact,
                    POP3: data.field.POP3,
                    SMTP: data.field.SMTP,
                    TwilioSid: data.field.TwilioSid,
                    TwilioAuth: data.field.TwilioAuth,
                    TwilioNumber: data.field.TwilioNumber,
                },
                header: {
                    Accept: 'application/json'
                },
                success: function (data) {
                    layer.msg('修改成功', {
                        icon: 1,
                        time: 1500
                    }, function () {
                        parent.layer.close(index);
                    });
                },
                error: function (data) {
                    console.log(data)
                }
            });

        });
    });
</script>

</body>